<template>
<!--    <div class="query-container">-->
<!--        <h2 class="title">查询用户的所有购物车项</h2>-->
<!--        <div class="input-group">-->
<!--            <label for="userId">用户ID:</label>-->
<!--            <input type="text" id="userId" v-model="userId" required>-->
<!--            <button @click="queryCartItems">查询</button>-->
<!--        </div>-->
<!--        <ul v-if="cartItems.length > 0" class="cart-items-list">-->
<!--            <li v-for="item in cartItems" :key="item.cartItemId" class="cart-item">-->
<!--                <div class="item-info">-->
<!--                    <span class="info-label">购物车项ID:</span> {{ item.cartItemId }}<br>-->
<!--                    <span class="info-label">商品项ID:</span> {{ item.itemId }}<br>-->
<!--                    <span class="info-label">具体产品ID:</span> {{ item.productId }}<br>-->
<!--                    <span class="info-label">单价:</span> {{ item.listPrice }}<br>-->
<!--                    <span class="info-label">数量:</span> {{ item.quantity }}<br>-->
<!--                    <span class="info-label">总价:</span> {{ item.total }}<br>-->
<!--                </div>-->
<!--            </li>-->
<!--        </ul>-->
<!--        <p v-if="message" class="message">{{ message }}</p>-->
<!--        &lt;!&ndash; 添加返回按钮 &ndash;&gt;-->
<!--        <button @click="goBack">返回</button>-->
<!--    </div>-->
</template>

<script setup>
// import { ref } from 'vue';
// import { useRouter } from 'vue-router';
// import axios from 'axios';
//
// const userId = ref('');
// const cartItems = ref([]);
// const message = ref('');
// const router = useRouter();
//
// const queryCartItems = async () => {
//     try {
//         const response = await axios.get(`/cartItem/user/${userId.value}`);
//         cartItems.value = response.data.data;
//         message.value = response.data.message;p
//     } catch (error) {
//         message.value = '查询失败';
//     }
// };
//
// // 返回上一页面的方法
// const goBack = () => {
//     router.back();
// };
</script>

<style scoped>
.query-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    color: #333;
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.input-group label {
    margin-right: 10px;
    font-weight: bold;
}

.input-group input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
}

.input-group button {
    padding: 8px 16px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.input-group button:hover {
    background-color: #0056b3;
}

.cart-items-list {
    list-style-type: none;
    padding: 0;
}

.cart-item {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;
}

.info-label {
    font-weight: bold;
    color: #666;
}

.message {
    text-align: center;
    color: #d9534f;
    margin-top: 10px;
}

/* 可以添加返回按钮的样式 */
button {
    padding: 10px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #5a6268;
}
</style>